<!DOCTYPE html>
<html>

<head>
    <title>创建不规则多边形</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.15/paper-full.min.js"></script>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <canvas id="myCanvas" resize></canvas>
    <script>
        paper.install(window);
        paper.setup('myCanvas');

        var segment, path;
        var movePath = false;

        var values = {
            paths: 50,
            minPoints: 5,
            maxPoints: 15,
            minRadius: 30,
            maxRadius: 90
        };

        var hitOptions = {
            segments: true,
            stroke: true,
            fill: true,
            tolerance: 5
        };

        // 假设已知路径点数组，每个点是一个[x, y]数组
        var pathPoints = [
            new Point(50, 50),
            new Point(100, 50),
            new Point(150, 100),
            new Point(100, 150),
            new Point(50, 150)
        ];

        // 使用给定的路径点创建Path对象
        var path = new Path();
        path.strokeColor = 'black';
        path.fillColor = 'red';


        function create_path(points_arr) {
            for (var i = 0; i < points_arr.length; i++) {
                var point = pathPoints[i];
                if (i === 0) {
                    path.moveTo(point);
                } else {
                    path.lineTo(point);
                }

                path.closePath();
            }
        }

        create_path(pathPoints);


        path.onClick = function (a) {
            console.log(a);
        }

        path.onMouseDrag=onMouseDrag_all;



        function onMouseDown(event) {
            segment = path = null;
            var hitResult = project.hitTest(event.point, hitOptions);
            if (!hitResult)
                return;

            if (event.modifiers.shift) {
                if (hitResult.type == 'segment') {
                    hitResult.segment.remove();
                };
                return;
            }

            if (hitResult) {
                path = hitResult.item;
                if (hitResult.type == 'segment') {
                    segment = hitResult.segment;
                } else if (hitResult.type == 'stroke') {
                    var location = hitResult.location;
                    segment = path.insert(location.index + 1, event.point);
                    path.smooth();
                }
            }
            movePath = hitResult.type == 'fill';
            if (movePath)
                project.activeLayer.addChild(hitResult.item);
        }

        function onMouseMove(event) {
            project.activeLayer.selected = false;
            if (event.item)
                event.item.selected = true;
        }

        function onMouseDrag_all(event) {
            path.add(event.point);
            path.strokeColor = 'black';
        }

        function onMouseDrag(event) {
            console.log(event)
            if (segment) {
                segment.point += event.delta;
                path.smooth();
            } else if (path) {
                path.position += event.delta;
            }
        }

        // 注册鼠标按下事件
        project.view.onMouseDown = onMouseDown;
        project.view.onMouseDrag = onMouseDrag;
        // project.view.onMouseUp = onMouseUp;







    </script>
</body>

</html>